{% load staticfiles %}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/font-awesome.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/style-as-insert.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/unit.css' %}">
<script type="text/javascript" src="{% static 'js/unit.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>

<title>企业考勤管理系统-个人账户</title>
</head>
<body onload="startTime()">
    <div class="head">
    	<h2>企业管理系统</h2>
    	<div class="head-right">
    		<span class="head-help"><a href="#">帮助</a></span>
    		<div id="head-time"></div>
    	</div>
    </div>
    <div id="navigation">
    	<nav role="navigation">
  		  <ul>
  		  	<a href="/"><li>首页</li></a>
          	<a href="/employee/list/"><li  class="li-active">职工管理</li></a>
          	<a href="/ment/ment/"><li>部门管理</li></a>
          	<a href="/classes/class/"><li>班次管理</li></a>
          	<a href="/chenk/chenk/"><li>考勤记录</li></a>
          	<a href="/"><li>系统维护</li></a>
          	<a href="/"><li>请假管理</li></a>
  		  	<button style="padding:0 10px; margin:10px 60px 0 0; float:right;">签到</button>
  		  </ul>
		  </nav>
    </div>
    <div class="left-list">
      <a href="/employee/list/"><div class="left-child">管理</div></a>
      <a href="/employee/add/"><div class="ll-active">录入</div></a>
      <a href="as-setting.html"><div class="left-child">权限设置</div></a>
    </div>
    <form action="/employee/add/" method="post">
    {% csrf_token %}
    <div class="right">
        <span class="title-bar">职工管理<i class="fa fa-angle-right" style="letter-spacing:2px;"></i>录入</span>
        <div class="form-group">
          <label for="name" class="col-sm-2 control-label">姓名</label>
          <div class="col-sm-10">
             <input name="s_name" type="text" class="form-control" id="lastname" placeholder="请输入姓名">
          </div>
          <label for="name" class="col-sm-2 control-label">工号</label>
          <div class="col-sm-10">
             <input name="s_id" type="text" class="form-control" id="lastname" placeholder="请输入工号">
          </div>
          <label for="name" class="col-sm-2 control-label">年龄</label>
          <div class="col-sm-10">
             <select name="age" class="form-control">
             {% for i in len %}
                 <option value="{{ i }}">{{ i }}</option>
             {% endfor %}
             </select>
          </div>
          <label for="name" class="col-sm-2 control-label">性别</label>
          <div class="col-sm-10">
             <select name="sex" class="form-control">
             <option value="男">男</option>
             <option value="女">女</option>
             </select>
          </div>
          <label for="name" class="col-sm-2 control-label">籍贯</label>
          <div class="col-sm-10">
             <select name="provinces" class="form-control">
                 {% for province in provinces %}
                     <option value="{{ province.id }}">{{ province.name }}</option>
                 {% endfor %}
             </select>
              <select name="citys" class="form-control">
                  <option value="">市辖区</option>
              </select>
              <select name="areas" class="form-control">
                  <option value="110101">东城区</option>
              </select>
          </div>
          <label for="name" class="col-sm-2 control-label">部门</label>
          <div class="col-sm-10">
             <select name="ment" class="form-control">
                 {% for ment in ments %}
                    <option>{{ ment.ment_name }}</option>
                 {% endfor %}
             </select>
          </div>
          <label for="name" class="col-sm-2 control-label">职位</label>
          <div class="col-sm-10">
             <select name="position" class="form-control">
             <option value="设计师">设计师</option>
             <option value="普通职员">普通职员</option>
             </select>
          </div>
          <label for="name" class="col-sm-2 control-label">手机号</label>
          <div class="col-sm-10">
             <input name="phone" type="text" class="form-control" id="lastname" placeholder="请输入你的手机号">
          </div>
          <label for="name" class="col-sm-2 control-label">邮箱</label>
          <div class="col-sm-10">
             <input name="email" type="text" class="form-control" id="lastname" placeholder="请输入一个有效的邮箱">
          </div>
          <label for="name" class="col-sm-2 control-label">生日</label>
             <div class="col-sm-10">
                 <input name="birthday" type="date" class="form-control" id="lastname">
             </div>
          <label for="name" class="col-sm-2 control-label"></label>
          <div class="col-sm-10">
             <input type="submit" class="form-control" id="lastname" value="提交">
          </div>
        </div>
        <div class="clear"></div>
        <hr/>

    </div>
    </form>

</body>
<script>
    $('select[name="provinces"]').change(function () {
        var provinceId = $(this).val()
        console.log(provinceId);
        $.ajax({
            type:'post',
            url:'/employee/address/',
            data:"provinceId="+provinceId+'&type=1&csrfmiddlewaretoken='+$('input[name="csrfmiddlewaretoken"]').val(),
            success:function (data) {
                console.log(data.citys)
                var citys_parent = $('select[name="citys"]')
                citys_parent.empty()
                for (var index = 0; index < data.citys.length; index++) {
                    var city = data.citys[index]
                    var r = '<option value="' + city.id + '">' + city.name + '</option>'
                    $(r).appendTo(citys_parent)
                }
                var areas_parent = $('select[name="areas"]')
                areas_parent.empty()
                for (var index = 0; index < data.areas.length; index++) {
                    var city = data.areas[index]
                    var r = '<option value="' + city.id + '">' + city.name + '</option>'
                    $(r).appendTo(areas_parent)
                }
            }
        })
    })
    $('select[name="citys"]').change(function(){
        {{ 456789 }}
        var cityid = $(this).val()
        $.ajax({
            type:'post',
            url:'/employee/address/',
            data:'cityId='+cityid+'&type=2&csrfmiddlewaretoken='+$('input[name="csrfmiddlewaretoken"]').val(),
            success:function(data){
                var areas_parent = $('select[name="areas"]')
                areas_parent.empty()
                $.each(data.areas,function(index,area){
                     var r='<option value="'+area.id+'">'+area.name+'</option>'
                     $(r).appendTo(areas_parent)
                })
            }
        })
     })

</script>
</html>